@import     "lib.less";
@import     "animation.less";
@import     "swiper.css";

.fontface-wraper{
	.fontface(@font-family-navigation, '../fonts/DIN-AlternateBold-mac');
	.fontface(@font-family-content, '../fonts/DIN-Regular');
	.fontface(@font-family-content-bold, '../fonts/DIN-Bold');
	.fontface(@font-family-caupmeta, '../fonts/SourceSansPro-Regular');
}

// Hack 
section.region.region-sidebar-first{display:none;}
a{transition: all 0.2s linear;}
body{
	background: #FFF;
	border-top: 80px solid #000;
	font-family: @font-family-content;
	.e(transition; background-position 0.4s);

	@media(min-width:1280px){
		background-size: 100% auto;
	}

	&.home{
		padding-top: 80px;
		border-top: 0;
		width: 100%;
		height: 100%;
		background-color: #000;
		background-repeat: no-repeat;
		background-position: center top;

		.caup-meta{
			position: fixed;
			z-index: 50;
			bottom: 0;
			width: 100%;
		}
	}
	// 底部页脚浮动时扩展页面高度, 避免遮挡
	&.exbot{
		padding-bottom: 200px;
	}
}
.navbar-fixed-top{
	z-index: 550;
}

.kv1{background-image: url(../images/kv-01.jpg); }
.kv2{background-image: url(../images/kv-02.jpg); }
.kv3{background-image: url(../images/kv-03.jpg); }
.kv4{background-image: url(../images/kv-04.jpg); }
.kv5{background-image: url(../images/kv-05.jpg); }

h1,h2,h3,h4,h5,h6{
	font-family: @font-family-navigation;
}

.email-protect:before{content:"@"}

// Main nagation
.navbar{
	background-color: rgba(0, 0, 0, 0.8);
	border: none;
}

.navbar-default{
	#navbar{
		position: relative;
	}

	.navbar-nav{

		>li{
			>a{
				font-family: @font-family-navigation;
				text-transform: uppercase;
				font-size: 18px;
				// .e(transition; all 0.3s ease-in);
			}

			.dropdown-menu{
				border: none;
				left: 0;
				right: auto;

				>li{
					>a{
						font-family: @font-family-content;
						font-size: 16px;

						.sub(@count) when (@count > 0) {
							&.sub-@{count}{
								text-indent: @count * 1em;
							}
							//
							.sub(@count - 1);
						}
						.sub(3);
						// &.parent{
						// 	font-weight: 800;
						// }
					}
				}
			}

			&:last-child{
				.dropdown-menu{
					left: auto;
					right: 0;
				}
			}
		}

		&:first-child{
			position: relative;
			margin-top: 42px;
		}

		&.language{
			position: absolute;
			right: -15px;
			top: 7px;

			>li{
				>a{
					font-size: 14px;
					font-family: "Microsoft YaHei", "微软雅黑";
					padding-top: 5px;
					padding-bottom: 5px;
				}
			}

			.search{
				font-size: 14px;
				font-family: @font-family-navigation;
				background-color: transparent;
				border: 0;
				border-bottom: 1px solid #FFF;
				opacity: 0.5;
				color: @color-content;
				margin-top: 3px;
				padding-bottom: 0px;
				width: 84px;
				.e(transition; all 0.3s ease-in-out);

				&:focus{
					opacity: 1;
					width: 200px;
					outline: none;
				}
			}
		}
	}

	.navbar-brand{
		padding-top: 15px;
		padding-bottom: 15px;

		>img.logo{
			display: inline-block;
		}
		>img.describe{
			display: none;
		}
	}
}

.nav-tabs.nav-stacked{
	border-bottom: 0;

	>li{
		&:hover{
			border:none;
		}
		>a{
			font-family: @font-family-content;
			padding: 2px 0;
			letter-spacing: -0.3px;

			&:hover{
				font-family: @font-family-content-bold;
				background:none;
				border-color: transparent;
				text-decoration: underline;
				color: @color-content-dark;
			}
		}

		&.active{
			a{
				font-family: @font-family-content-bold;
				border-color:transparent;
				color: @color-content-dark;
				text-decoration: underline;
			}
		}

		>ul{
			list-style: none;
			padding-left: 1em;
		}
	}
}

.subnav{
	>h2{
		margin-top: 40px;
		margin-bottom: 30px;
		font-size: 20px;
	}
	>.nav>li.sub-1{
		margin-left: 12px;
	}
}

.breadcrumb{
	background-color:transparent;
	padding: 40px 0 37px;
	margin-bottom: 0;
	font-family: @font-family-navigation;

	li{
		&.active{
			color: @color-brand;
		}
	}
	li+li{
		&:before{
			content: ">";
			font-family: inherit;
			// color: inherit;
		}
	}
}

.caup-meta{
	height: 145px;
	background-color: #111;
	padding: 30px 0;
	margin-top: 50px;
	font-family: @font-family-caupmeta;

	&.fixed{
		position: fixed;
		bottom: 0;
		width: 100%;
	}
	.caup-logo{
		float: left;
		margin-right: 30px;
	}

	.caup-name{
		color: #FFF;
		text-transform: uppercase;
		margin-bottom: 27px;
	}

	.copyright{
		font-size: 12px;
		margin-top: -6px;
		color: #888;
	}

	.caup-links{
		color: #888;
		>h6{
			display: inline-block;
			text-transform: uppercase;
			padding-right: 10px;
		}
		>ul{
			list-style: none;
			display: inline;
			padding: 0;

			>li{
				display: inline-block;

				&:before{
					content: "\7c";
					padding: 0 10px;
				}
				&:first-child:before{
					display: none;
				}

				>a{
					color: inherit;
				}

				&:last-child{
					// More list
					>a{
						padding: 0;
						margin-top: -2px;
					}
					.dropdown-menu{
						left: auto;
						right: 0;
					}
				}
			}
		}

		.collapse{
			display: none;
		}
	}

	.wechat{
		position: absolute;
		top: 0;
		right: 15px;
		.e(perspective; 300px);
		.e(perspective-origin; center top);

		>a{
			padding-left: 30px;
			color: #FFF;
			text-decoration: none;
			background: url(../images/icon-wechat.png) no-repeat 0 2px;

			.name{
				position: relative;
				z-index: 5;
			}

			.qr{
				position: absolute;
				right: 0;
				top: -160px;
				opacity: 0;
				.e(transform-origin; center 170px);
				.e(transform; rotateX(85deg));
				.e(transition; all 0.25s ease-in-out);
				.e(box-shadow; 0 1px 25px 2px rgba(0,0,0,0.9));


				img{
					width: 152px;
					height: 152px;
				}
			}

			&:hover{
				.qr{
					opacity: 1;
					.e(transform; rotateX(0));
				}
			}
		}
	}
}

#billboard{
	padding: 30px 0;
	height: 210px;
	background-color: @color-background-trans;
	position: fixed;
	bottom: 145px;
	width: 100%;
	color: #FFF;
	font-family: @font-family-caupmeta;
	z-index: 10;
	.e(transition; bottom 0.8s ease);

	dt{
		position: relative;
		margin-bottom: 15px;

		>h5{
			font-family: @font-family-navigation;
			font-size: 24px;
			color: #FFF;
			margin: 0;
			line-height: 1em;
			text-transform: uppercase;
		}
		>.btn-more{
			position: absolute;
			top: 5px;
			right: 0;
			color: #FFF;
			font-family: @font-family-caupmeta;
		}
		>.btn-left,
		>.btn-right{
			position: absolute;
			top: 5px;
			right: 0;
			display: block;
			width: 18px;
			height: 18px;
			background: url(../images/icon-arrow-lr.png) no-repeat left top;

			span{display: none;}
		}
		>.btn-left{
			right: 18px;
			background-position: 0 -18px;
			&:hover{
				background-position: 0 0;
			}
		}
		>.btn-right{
			background-position: -18px -18px;
			&:hover{
				background-position: -18px 0;
			}
		}
	}

	.textlist{
		margin: 0;padding: 0;
		list-style: none;

		>li{
			padding-right: 80px;
			position: relative;
			line-height: 1.2em;
			margin-bottom: 5px;
			.text-ellipsis();

			>a{
				color: inherit;

				&:hover{
					text-decoration: underline;

					.date{
						color: lighten(@color-content-minor, 20%);
					}
				}
			}

			.date{
				position: absolute;
				top: 0;
				right: 0;
				color: @color-content-minor;
			}
		}
	}

	.proflist-container {
		width: 100%;
		height: 104px;
		overflow: hidden;
	}

	.proflist{
		padding:0;
		list-style: none;
		min-width: 280px;

		>li{
			width: 80px;
			height: 104px;
			position: relative;
			// margin-right: 10px;
			overflow: hidden;
			float: left;

			.detail{
				position: absolute;
				display: table;
				top: 0;
				left: 0;
				opacity: 0;
				width: 100%;
				height: 100%;
				background-color: @color-background-trans;
				color: @color-content;
				text-align: center;
				.e(transition; opacity 0.3s ease);

				.name{
					display: table-cell;
					vertical-align: middle;
				}
			}

			&:hover{
				.detail{
					opacity: 1;
				}
			}
		}
	}

	>.container:first-child{
		position: relative;
	}

	.toggle-control{
		position: absolute;
		top: -30px;
		right: 15px;
		// .e(perspective; 300px);
		// .e(perspective-origin; 100% 15px);
		.e(transition; top 0.3s ease-out);

		.toggle{
			position: absolute;
			display: block;
			top: 0;
			right: 0;
			color: @color-content;
			white-space: nowrap;
			text-decoration: none;
			text-transform: uppercase;
			font-family: @font-family-navigation;
			padding: 5px 10px 5px 27px;
			background-color: #000;
			// .e(transform-origin; 50% 50% -15px);

			&:before{
				content: "\2666";
				font-size: 26px;
				position: absolute;
				top: 2px;
				left: 8px;
				display: block;
				overflow: hidden;
				height: 18px;
				width: 13px;
				.e(transform-origin; 50% 75%);
			}

			&:focus{
				outline: none;
			}

			&.toghide:before{
				.e(transform; rotateZ(180deg));
			}
		}
	}


	&.opened{
		.toggle.toghide{
			display: block;
			// .rotate-up-in();
		}
		.toggle.togshow{
			display: none;
			// .rotate-down-out();
		}
	}
	&.closed{
		bottom: -65px;

		.toggle-control{
			top: -60px;
		}

		.toggle.toghide{
			display: none;
			// .rotate-up-out();
		}
		.toggle.togshow{
			display: block;
			// .rotate-down-in();
		}
	}
}

#recent-float{
	opacity: 0;
	visibility: hidden;
}
#recent-float .float-container{
	color: #FFF;
	// margin-top: 20px;

	>div{
		background-color: rgba(0,0,0,0.8);
		padding: 10px;
		margin-bottom: 5px;
	}
	h5{
		font-family: @font-family-navigation;
		font-size: 24px;
		color: #FFF;
		margin: 0;
		line-height: 1em;
		text-transform: uppercase;
	}
	h6{
		a{
			color: inherit;
			text-decoration: none;
		}
	}
	.news-meta{}
	.news-type{
		margin-left: -10px;
		margin-right: 5px;
		padding: 0 5px;

		&.lecture{background-color: @color-label-news-lecture;}
		&.event{background-color: @color-label-news-event;}
		&.exhibition{background-color: @color-label-news-exhibition;}
		&.conference{background-color: @color-label-news-conference;}
		&.publication{background-color: @color-label-news-publication;}
		&.others{background-color: @color-label-news-others;}
	}
	.news-thumb{
		float:left;
		width: 30%;
		margin-right: 10px;
		margin-bottom: 0;
		>img{width: 100%;}
	}
	.news-title,
	.news-summary{
		font-size: 14px;
		color: #999;
	}
	.news-summary{
		line-height: 1.2em;
		font-size: 12px;
		color: #666;
		a{
			color: inherit;
		}
	}
	.float-foot{
		line-height: 20px;
		text-align: center;
		.more>span{
			.triangle-bottom(24px, 12px, #999);
			vertical-align: middle;
		}
	}

	.news-item{
		&:hover{
			.news-title{
				color: #FFF;
			}
			.news-summary{
				color: #999;
			}
		}
	}
}

// 人物名片
// .pcard-group{
	.pcard{
		border: 1px solid @color-content-minor;
		padding: 6px;
		margin-bottom: 30px;
		height: 199px;
		
		a{
			color: inherit;
		}
		.name{
			font-size: 24px;
			margin-top: 32px;
			margin-bottom: 3px;
			color: @color-content-dark;
		}
		.photo{
			float: left;
			margin-right: 10px;
			margin-bottom: 0;
			>img{
				width: 150px;
				height: 185px;
			}
		}
		.professional{
			font-size: 18px;
			margin-bottom: 25px;
			height: 50px;
			position: relative;
			color: @color-content-dark-minor;

			&:after{
				content: "";
				position: absolute;
				width: 40px;
				border-top: 1px solid #666;
				left: 160px;
				bottom: -14px;
			}
		}
		.contact{
			font-size: 16px;
			color: @color-content-dark;
			font-family: @font-family-navigation;
			a{
				color: @color-content-dark;
				&:hover{
					color: lighten(@color-content-dark, 30%);
				}
			}
		}
	}
// }


// .struct-group {
	.struct-leading{
		margin:0;
		>img{
			width:100%;
		}
	}
	.struct{
		padding: 30px 0 0 16px;
		position: relative;
		list-style: none;

		@color-border-grey:   #CCC;
		
		&:before{
			content: "";
			position: absolute;
			left: 16px;
			height: 30px;
			border-left: 1px solid @color-border-grey;
			top: 0;
		}

		>li{
			>.title{
				font-size: 16px;
				font-family: @font-family-navigation;
				height: 30px;
				line-height: 30px;
				min-width: 256px;
				border-radius: 15px;
				color: @color-content;
				padding: 0 2em;
				background-color: @color-brand;
				display: inline-block;
				margin: 0 0 0 -16px;

				&:before{
					content: "";
					display: inline-block;
					width: 11px;
					height: 11px;
					border-radius: 6px;
					position: relative;
					top: 1px;
					left: -21px;
					background-color: @color-content;
				}
			}
			>ul{
				list-style: none;
				font-size: 14px;
				line-height: 2.5em;
				padding: 16px 14px 42px 25px;
				border-left: 1px solid @color-border-grey;

				>li{
					padding-left: 27px;

					&:before{
						content: "";
						display: inline-block;
						width: 11px;
						height: 11px;
						border: 1px solid @color-brand;
						border-radius: 6px;
						margin-right: -11px;
						position: relative;
						top: 1px;
						left: -27px;
					}
				}
			}

			&:last-child{
				>ul{
					padding-bottom: 0;
				}
			}
			a{
				color: inherit;
				&:after{
					content: "\e144";
					font-family: 'Glyphicons Halflings';
					font-size: 0.4em;
					margin-left: 0.5em;
					text-decoration: none;
				}
			}
		}
	}
// }

article,
.artical{

	line-height: 1.5em;

	.title{
		// text-align: center;
		// font-size: 25px;
		// margin: 20px 0 10px;
		// margin: 0px 0 10px;
	}
	.pubdate{
		text-align: center;
		margin-bottom: 2em;
	}
	h1{
		color: inherit;
		text-align: center;
		margin-top:0;
		font-size: 2.142857143em;
		margin-bottom: 0.3em;
	}
	h2,h3,h4,h5,h6{
		color: @color-brand;
	}
	.title-3{
		font-size: 1.25em;
		margin-bottom: 20px;
	}
	.title-4{
		font-size: 1.142857143em;

		&:before{
			content:"-";
			padding-right: 10px;
		}
	}
	.title-4,
	p{
		margin: 0 0 0px;

		.strong{
			font-family: @font-family-content-bold;
		}
	}
	>p>img,
	>p>span>img,{
		display: block !important;
		margin-left: auto !important;
		margin-right: auto !important;
		max-width: 85% !important;
	}

	ul{
		padding-left: 0;

		li{
			list-style: none;
			line-height: 2.4em;

			&:before{
				content:"---";
				letter-spacing: -2px;
				font-family: @font-family-content-bold;	
				padding-right: 10px;
				color: @color-brand;
			}
			>p,>div{display:inline-block;margin-top:0;margin-bottom:0;}
		}
	}
}

.article-meta{
	padding: 20px 0;
	border-top: 1px dashed @color-content;
	border-bottom: 1px dashed @color-content;
	border-color: lighten(@color-content-dark, 60%);
	font-family: @font-family-navigation;

	p:last-child{
		margin-bottom:0;
	}

	a{
		color: @color-brand;
	}
}

.library-item{
	margin-bottom: 60px;

	.index{
		font-size: 20px;
		padding: 7px 5px 3px;
		background-color: @color-content-dark;
		color: @color-content;
		font-family: @font-family-navigation;
		display: block;
		width: 30px;
		height: 30px;
		line-height: 20px;
		position: relative;

		&:before {
			content: " ";
			position: absolute;
			width: 7px;
			border-top: 1px solid #FFF;
			top: 5px;
			left: 6px;
		}
	}

	.type{
		color: @color-brand;
		font-size: 14px;
		border-top: 1px solid @color-content-dark;
		width: 60%;
		margin-top: 5px;
		margin-bottom: 3px;
		padding-top: 13px;
	}
	.name{
		color: @color-content-dark;
		font-size: 25px;
		width: 60%;
		margin-top:0;
		margin-bottom: 20px;
		border-bottom: 1px solid @color-content-dark;
		padding-bottom: 12px;
	}
}

.cauplist{
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #eaeaea;

	.item{
		height: 48px;
		line-height: 48px;
		font-size: 14px;
		border-bottom: 1px solid #eaeaea;
		padding: 0 20px 0 15px;
		position: relative;

		.title{
			font-family: @font-family-content-bold;
			margin-right: 100px;
			.text-ellipsis();
			>a{
				color: inherit;
			}

			.label{
				display: inline-block;
				width: 80px;
				text-align: center;
				margin-right: 5px;
			}
		}
		.date{
			position: absolute;
			right: 20px;
			top: 0;
			height: 100%;
		}
	}
	.item:nth-child(2n+1){
		background-color: #f1f1f1;
	}
	
	&+nav{
		text-align: center;
	}
}


// Override bootstrap
.pagination
{
	margin-top: 50px;
	margin-bottom: 50px;

	li{
		>a,>span{
			padding: 10px 20px;
			margin-right: 5px;
			border: 0;
			color: #FFF;
			background-color: #D4D4D4;
			font-size: 16px;
			font-family: @font-family-navigation;

			&:hover{
				color: #FFF;
				background-color: #999;
			}
		}

		&:first-child>a,
		&:first-child>span{
			border-bottom-left-radius: 24px;
			border-top-left-radius: 24px;
			padding-left:35px;
			padding-right: 30px;
		}
		&:last-child>a,
		&:last-child>span{
			border-bottom-right-radius: 24px;
			border-top-right-radius: 24px;
			margin-right: 0;
			padding-right:35px;
			padding-left: 30px;
		}
		&.active>a,
		&.active>span{
			background-color: #999;
			&:hover{
				background-color: #999;
			}
		}

		&.disabled>a,
		&.disabled>span,{
			background-color: #D4D4D4;
			&:hover{
				background-color: #D4D4D4;
			}
		}
	}
}

.link-group{
	.link-item{
		text-align: center;
		margin-bottom: 3em;

		>a{
			text-decoration: none;
			display: block;
			width: 100%;
			height: 100%;

			&:hover{
				color: @color-brand;

				>img{
					&.normal{
						display: none;
					}
					&.grey{
						display: inline-block;
					}
				}
			}

			>img{
				width: 88px;
				height: 88px;
				display: inline-block;
				margin-bottom: 15px;

				&.grey{
					display: none;
				}
			}

			.title{
				display: block;
			}
		}
	}
}

@media (min-width: 768px){

.navbar-default{
	.navbar-nav>li>a{
		padding-top: 8px;
		padding-bottom: 10px;
	}

	.navbar-brand {
		position: relative;
		z-index: 99;
		img.describe{
			display: inline-block;
		}
	}
}

// @media (min-width: 768px)
}

@media (max-width: 767px){

body.home{
	.caup-meta{
		position: static;
		padding-top: 0;
	}
	
	#billboard{
		position: static;
		height: auto;
		margin-top: 130%;

		dd{
			margin-bottom: 4em;
		}

		.toggle-control{display: none}
	}
}

.navbar-nav.language{
	display: none;
}

.caup-meta{
	margin-top: 0;
	height: auto;
	.caup-name{
		margin-top: 14px;
	}

	.caup-links{
		margin-bottom: 15px;

		>h6{
			display: block;
		}

		>ul{
			>li{
				margin: 5px 0;
				padding-right: 5px;

				&:before{
					padding-left: 0;
					padding-right: 5px;
				}
				&:first-child:before{
					display: inline-block;
				}
				&:last-child{
					display: none;
				}
			}
		}

		.collapse{
			display: inline-block;
		}
	}

	.copyright{
		text-align: center;
	}

	.wechat{
		position: static;
		margin-top: 20px;
		text-align: center;

		>a{
			.qr{
				position: static;
				display: block;
				opacity: 1;
				.e(transform; rotateX(0));
				margin-top: 10px;
			}
		}
	}
}

#recent-float{display:none;}
// @media (max-width: 768px)
}